// Created by carolsail

import { ENUM_AUDIO_CLIP, ENUM_GAME_MODE, ENUM_UI_TYPE } from "../Enum";
import { StaticInstance } from './../StaticInstance';
import AudioManager from "../manager/AudioManager";
import BaseLayer from "./Baselayer";
import PoolManager from "../manager/PoolManager";
import UIScrollControl from "../plugins/UIScrollControl";
import ResourceManager from "../manager/ResourceManager";
import DataManager from "../manager/DataManager";

const { ccclass, property } = cc._decorator;

@ccclass
export default class ChatLayer extends BaseLayer {

    panel: cc.Node = null
    btnClose: cc.Node = null

    tabs: cc.Node[] = []
    mainScrolls: cc.Node[] = []
    tabIndex: number = 0

    labels: string[] = [
        '泰裤辣~',
        '大家好呀！',
        '红方加油！',
        '黄方加油！',
        '蓝方加油！',
        '绿方加油！',
        '等到花儿都谢了~'
    ]
    spriteFrames: cc.SpriteFrame[] = []

    onLoad() {
        this.panel = cc.find('style/panel', this.node)
        this.btnClose = cc.find('btn_close', this.panel)
        this.btnClose.on('click', this.onCloseClick, this)
        this.tabs = this.panel.getChildByName('tabs').children
        this.mainScrolls = this.panel.getChildByName('main').children
        this.tabs.forEach((tab, index) => {
            if (!tab.hasEventListener('click')) {
                tab.on('click', () => { this.onTabClick(index) }, this)
            }
        })
    }

    onDestroy() {
        this.btnClose.off('click', this.onCloseClick, this)
    }

    onEnable() {
        this.zoomIn(this.panel)
        this.rendor()
    }

    onDisable() { }

    onCloseClick() {
        AudioManager.instance.playSound(ENUM_AUDIO_CLIP.CLICK)
        StaticInstance.uiManager.toggle(ENUM_UI_TYPE.CHAT, false)
    }

    rendor() {
        this.mainScrolls.forEach((scroll, index) => {
            const content = cc.find('view/content', scroll)
            if (content.children.length <= 0) {
                if (index == 0) {
                    this.labels.forEach((label, index) => {
                        const chatLabel = PoolManager.instance.getNode('ChatLabel', content)
                        chatLabel.getChildByName('label').getComponent(cc.Label).string = `${label}`
                        if (!chatLabel.hasEventListener('click')) {
                            chatLabel.on('click', () => { this.onItemClick('text', index) }, this)
                        }
                    })
                } else {
                    this.spriteFrames = ResourceManager.instance.spritesMap['atlas/emoji_static.plist']
                    this.spriteFrames.forEach((spriteFrame: cc.SpriteFrame, index) => {
                        const chatImage = PoolManager.instance.getNode('ChatImage', content)
                        chatImage.getChildByName('image').getComponent(cc.Sprite).spriteFrame = spriteFrame
                        if (!chatImage.hasEventListener('click')) {
                            chatImage.on('click', () => { this.onItemClick('image', index) }, this)
                        }
                    })
                }
            }
        })
    }

    onTabClick(index: number) {
        if (index == this.tabIndex) return
        this.tabIndex = index
        this.onTabChange()
    }

    onTabChange() {
        this.tabs.forEach((tab, index) => {
            tab.getChildByName('active').active = this.tabIndex == index
            this.mainScrolls[index].active = this.tabIndex == index
        })
    }

    onItemClick(type: string, index: number) {
        if (DataManager.instance.mode == ENUM_GAME_MODE.SINGLE) {
            this.setMessage(type, index)
        } else {
            const params = {
                type: 'msg_game_chat',
                room: DataManager.instance.room,
                content: {
                    type,
                    index
                }
            }
            DataManager.instance.wsClient.callApi('GameSync', params)
        }
        this.hide()
    }

    setMessage(type: string, index: number) {
        let data = null
        if (type == 'text') {
            data = this.labels[index]
        } else {
            if (this.spriteFrames.length <= 0) {
                this.spriteFrames = ResourceManager.instance.spritesMap['atlas/emoji_static.plist']
            }
            data = this.spriteFrames[index]
        }
        StaticInstance.uiManager.setMainEmoji(data)
    }
}
